<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
    <meta name="format-detection" content="telephone=no" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>EnglishPal Study Room for {{username}}</title>
</head>
<body>
    <div class="container-fluid">
    <p><b>English Pal for <font color="red">{{username}}</font></b> <a class="btn btn-secondary" href="/logout" role="button">登出</a></p>
        {{flashed_messages}}
    <p><b>阅读文章并回答问题</b></p>
    <p><a class="btn btn-success" href="/{{username}}/reset" role="button"> 下一篇 Next Article </a></p>
      <div id="text-content">{{today_article|safe}}</div>
      <p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
      <form method="post" action="/{{username}}">
         <textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>
         <input type="submit" value="get 所有词的频率"/>
         <input type="reset" value="清除"/>
      </form>
         <script>
                   function getWord(){
                       var word = window.getSelection?window.getSelection():document.selection.createRange().text;
                       return word;
                   }
                   function fillinWord(){
                       var element = document.getElementById("selected-words");
                       element.value = element.value + " " + getWord();
                   }
                   document.getElementById("text-content").addEventListener("click", fillinWord, false);
                   document.getElementById("text-content").addEventListener("touchstart", fillinWord, false);
         </script>
      {% if session.get['thisWord'] %}
        <script type="text/javascript">
                        //point to the anchor in the page whose id is aaa if it exists
                        window.onload = function(){
                            var element = document.getElementsByName("aaa");
                            if (element != null)
                                document.getElementsByName("aaa")[0].scrollIntoView(true);
                        }
        </script>
     {% endif %}

    {% if d_len > 0 %}
        <p><b>我的生词簿</b></p>
    {% for x in lst3 %}
        {% set word = x[0] %}
        {% set freq = x[1] %}
        {% if session.get('thisWord') == x[0] and session.get('time') == 1 %}
            <a name="aaa"></a>
        {% endif %}
        {% if isInstance %}
            {% if freq > 1 %}
                <p class="new-word">
                <a class="btn btn-light" href='http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index' role="button">{{word}}</a>
                (
                <a title="{{word}}">{{freq}}</a>
                )
                <a class="btn btn-success" href={{username}}/{{word}}/familiar role="button">熟悉</a>
                <a class="btn btn-warning" href={{username}}/{{word}}/unfamiliar role="button">不熟悉</a>
                <a class="btn btn-danger" href={{username}}/{{word}}/del role="button">删除</a>
                </p>
                <br>
            {% else %}
                <p class="new-word">
                <a class="btn btn-light" href='http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index' role="button">{{word}}</a>
                (
                <a title="{{word}}">{{freq}}</a>
                )
                <a class="btn btn-success" href={{username}}/{{word}}/familiar role="button">熟悉</a>
                <a class="btn btn-warning" href={{username}}/{{word}}/unfamiliar role="button">不熟悉</a>
                <a class="btn btn-danger" href={{username}}/{{word}}/del role="button">删除</a>
                </p>
                <br>
            {% endif %}
        {% else %}
            <a href='http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index'>{{word}}</a>{{freq}}
        {% endif %}
    {% endfor %}
    {% endif %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>'
    </div>
</body>
</html>